<template>
	<div class="totalProjectInvestmentPage">
		<div class="search-wrap d-flex a-center">
			<div class="search-item d-flex a-center m-l20">
				<label>项目名称</label>
				<el-select
					v-model="form.projectId"
					class="m-l5"
					placeholder="请选择项目"
					clearable
          filterable
				>
					<el-option
						v-for="(item, index) in projectList"
						:key="index"
						:label="item.projectName"
						:value="item.projectId"
					></el-option>
				</el-select>
			</div>
			<div class="search-item d-flex a-center m-l20">
				<label>年度</label>
				<el-date-picker
					class="m-l10"
					clearable
					v-model="form.year"
					value-format="YYYY"
					size="large"
					type="year"
					placeholder="请选择"
				/>
			</div>
			<div class="search-buttons m-l50">
				<el-button color="#fc702b" style="color: #fff" @click.prevent="onQuery">
					查询
				</el-button>
				<el-button
					color="#f0f0f0"
					style="color: #000000"
					@click.prevent="onReset"
				>
					重置
				</el-button>
				<el-divider direction="vertical" />
				<el-button
					class="button_edit"
					@click="onExport"
				>
					<svg-icon
						icon-class="project-detail-icon-derive"
						class="icon-export m-r5"
					></svg-icon>
					导出
				</el-button>
			</div>
		</div>
		<public-table
			class="m-t20"
			index
			:page="page"
			:tableData="tableData"
			:tableOption.sync="tableOption"
			@page-change="onPageChange"
		>
		</public-table>
	</div>
</template>

<script setup>
import {
	ElDatePicker,
	ElDivider,
	ElMessage,
	ElOption,
	ElSelect,
	ElTable,
	ElTableColumn,
} from "element-plus";
import { onMounted, reactive, ref } from "vue";
import { projectInvestApi, consoleApi } from "@/api/investment";
import { exportExcelFile, resetForm } from "@/common/utils/GlobalUtils";
import PublicTable from "@/components/PublicTable";

const page = reactive({
	total: 0,
	current: 1,
	size: 20,
});
const tableOption = ref([
	{ label: "项目名称 ", prop: "projectName", minWidth: 80 },
	{ label: "年度 ", prop: "year", minWidth: 60 },
	{ label: "工程类费用 ", prop: "engineeringExpenses", minWidth: 100 },
	{ label: "设计费用 ", prop: "designCost", minWidth: 80 },
	{ label: "招标费用", prop: "expenseOfPublicBidding", minWidth: 80 },
	{ label: "设备及软装", prop: "equipmentCosts", minWidth: 100 },
	{ label: "其他成本", prop: "otherCosts", minWidth: 80 },
	{ label: "总投资", prop: "total", minWidth: 80 },
	{ label: "拟投资额", prop: "projectAmount", minWidth: 80 },
	{
		label: "完成率",
		prop: "ratio",
		minWidth: 80,
		formatter: (val, row) => {
			return Math.round(val || 0) * 100 + "%";
		},
	},
]);

const tableData = ref([]);

const form = reactive({
	projectId: "",
	year: "",
});

const onQuery = () => {
	page.current = 1;
	let param = {
		param: {
			...form,
		},
		pageNum: page.current,
		pageSize: page.size,
	};
	getList(param);
};

const onReset = () => {
	resetForm(form);
	page.current = 1;
	let param = {
		pageNum: page.current,
		pageSize: page.size,
	};
	getList(param);
};

const onPageChange = (e) => {
	page.current = e.page;
	page.size = e.limit;
	let param = {
		param: {
			...form,
		},
		pageNum: page.current,
		pageSize: page.size,
	};
	getList(param);
};

const onExport = () => {
	projectInvestApi.fileExport(form).then((res) => {
		if (res) {
			exportExcelFile(res, "项目总投资表");
		}
	});
};

// 获取项目名称选项
let projectList = ref([]);
let getProjectList = async () => {
	let res = await consoleApi.projectInvestment({});
	projectList.value = res.data ?? [];
};

// 获取数据
let getList = async (param) => {
	let res = await projectInvestApi.getList(param);
	page.total = res.data.totalSize ?? 0;
	tableData.value = res.data.content ?? [];
};

onMounted(() => {
	getProjectList();
	getList({
		param: {
			...form,
		},
		pageNum: page.current,
		pageSize: page.size,
	});
});
</script>

<style lang="scss" scoped>
.totalProjectInvestmentPage {
	.search-wrap {
		.search-item {
			.el-input {
				width: auto !important;
			}
		}
		.search-buttons {
			.icon-export {
				width: 18px;
				height: 18px;
			}
		}
	}
}
</style>
